<template>
    <div>
        <Row :gutter="10">
            <Col>
                <Card>
                    <Row :gutter="10">
                        <div style="float:left;margin-bottom: 10px;">
                            <Input v-model="filter.nickname" @on-search="search" search enter-button="查询" placeholder="请输入用户昵称"
                                   style="width:250px; margin-right: 10px;float: right;top:0;font-size: 14px;"/>
                        </div>
                        <div style="float:left;margin-bottom: 10px;">
                            <Input v-model="filter.phone" @on-search="search" search enter-button="查询" placeholder="请输入用户手机号"
                                   style="width:250px; margin-right: 10px;float: right;top:0;font-size: 14px;"/>
                        </div>
                    </Row>
                    <Row class="margin-top-10 table_pattern">
                        <Table :columns="columns" :data="list"></Table>
                    </Row>
                    <Row class="margin-top-10">
                        <Page :total="pagenation.totalPage" :page-size="pagenation.perPage"
                              :current="pagenation.currentPage" show-elevator show-total @on-change="change"></Page>
                    </Row>
                </Card>
            </Col>
        </Row>
        <Modal v-model="show_invite_record" :title="invite_title" width="600" :mask-closable="false" class="public_modal_header edit_modal">
          <Row class="margin-top-10 table_pattern">
            <Table :columns="columns_invite" :data="invite_list"></Table>
            <Page :total="pagenation_invite.totalPage" :page-size="pagenation_invite.perPage"
                              :current="pagenation_invite.currentPage" show-elevator show-total @on-change="changeInvite" style='margin-left:10px'></Page>
          </Row>
        </Modal>
    </div>
</template>
<script>
    import config from '@/config'
    import { getMemberList, getInviteList} from '@/api/main'
    export default {
        data() {
            return {
                columns: [
                    {
                        key: 'nickname',
                        title: '用户昵称',
                        align: 'center',
                        render: (h, params) => {
                            return h('strong',  params.row.nickname)
                        },
                    },
                    {
                        key: 'phone',
                        title: '用户手机号',
                        align: 'center',
                        render: (h, params) => {
                            return h('strong',  params.row.phone)
                        },
                    },
                    {
                        key: 'head_url',
                        title: '用户头像',
                        align: 'center',
                        render: (h, params) => {
                            return h(
                                'div',
                                {
                                    style: {
                                        backgroundImage: 'url(' + params.row.head_url + ')',
                                        width: '60px',
                                        height: '60px',
                                        objectFit:'cover',
                                        margin: '10px auto',
                                        position: 'relative',
                                        cursor: 'pointer',
                                        backgroundSize: 'cover',
                                    },
                                }
                            )
                        },
                    },
                    {
                        key: 'invite_code',
                        title: '邀请码',
                        align: 'center',
                        render: (h, params) => {
                            return h('strong',  params.row.invite_code)
                        },
                    },
                    {
                        key: 'invite_first_count',
                        title: '一级邀请人员数量',
                        align: 'center',
                        render: (h, params) => {
                            return h('strong',
                                [
                                    h(
                                        'Button',
                                        {
                                            props: {
                                                size: 'small'
                                            },
                                            style: {
                                                marginRight: '5px',
                                                border:0,
                                                background:'transparent',
                                                fontSize:'14px',
                                                color:'#377EEF'
                                            },
                                            on: {
                                                click: () => {
                                                    this.getFirstInviteRecord(params.row)
                                                },
                                            },
                                        },
                                        params.row.invite_first_count + ' 查看',
                                    )
                                ])
                        },
                    },
                    {
                        key: 'invite_second_count',
                        title: '二级邀请人员数量',
                        align: 'center',
                        render: (h, params) => {
                            return h('strong',
                                [
                                    h(
                                        'Button',
                                        {
                                            props: {
                                                size: 'small'
                                            },
                                            style: {
                                                marginRight: '5px',
                                                border:0,
                                                background:'transparent',
                                                fontSize:'14px',
                                                color:'#377EEF'
                                            },
                                            on: {
                                                click: () => {
                                                    this.getSecondInviteRecord(params.row)
                                                },
                                            },
                                        },
                                        params.row.invite_second_count + ' 查看',
                                    )
                                ])
                        },
                    },
                ],
                columns_invite: [
                    {
                        key: 'nickname',
                        title: '用户昵称',
                        align: 'center',
                        render: (h, params) => {
                            return h('strong',  params.row.nickname)
                        },
                    },
                    {
                        key: 'phone',
                        title: '用户手机号',
                        align: 'center',
                        render: (h, params) => {
                            return h('strong',  params.row.phone)
                        },
                    },
                    {
                        key: 'head_url',
                        title: '用户头像',
                        align: 'center',
                        render: (h, params) => {
                            return h(
                                'div',
                                {
                                    style: {
                                        backgroundImage: 'url(' + params.row.head_url + ')',
                                        width: '60px',
                                        height: '60px',
                                        objectFit:'cover',
                                        margin: '10px auto',
                                        position: 'relative',
                                        cursor: 'pointer',
                                        backgroundSize: 'cover',
                                    },
                                }
                            )
                        },
                    },
                    {
                        key: 'invite_code',
                        title: '邀请码',
                        align: 'center',
                        render: (h, params) => {
                            return h('strong',  params.row.invite_code)
                        },
                    },
                ],
                show_invite_record: false,
                invite_title: '一级邀请人员列表',
                pagenation: {},
                pagenation_invite: {},
                page_invite: 0,
                type: 1,
                invite_list: [],
                list: [],
                filter: {
                    page: 0,
                    nickname: '',
                    phone: '',
                },
            }
        },
        methods: {
            change: function(page) {
                this.filter.page = page-1
                this.init()
            },
            changeInvite: function(page) {
                this.page_invite = page-1
                this.getInviteList()
            },
            search: function () {
                this.filter.page = 0
                this.init()
            },
            getFirstInviteRecord(item) {
                let _this = this
                _this.current_obj = item
                _this.type = 1
                _this.invite_title = '一级邀请人员列表'
                _this.pagenation_invite = {}
                _this.page_invite = 0
                _this.invite_list = []
                _this.getInviteList()
            },
            getSecondInviteRecord(item) {
                let _this = this
                _this.current_obj = item
                _this.type = 2
                _this.invite_title = '二级邀请人员列表'
                _this.pagenation_invite = {}
                _this.page_invite = 0
                _this.invite_list = []
                _this.getInviteList()
            },
            getInviteList() {
                let _this = this
                let obj = {}
                obj.user_id = _this.current_obj.id
                obj.page = _this.page_invite
                obj.type = _this.type
                getInviteList(obj).then(res => {
                    if (res.code == 0) {
                        this.invite_list = res.data
                        this.pagenation_invite.currentPage = parseInt(res.currentPage) + 1
                        this.pagenation_invite.totalPage = parseInt(res.totalPage)
                        this.pagenation_invite.perPage = parseInt(res.perPage)

                    } else {
                        this.$Message.error(res.text)
                    }
                })
                _this.show_invite_record = true
            },
            init () {
                getMemberList(this.filter).then(res => {
                    if (res.code == 0) {
                        this.list = res.data
                        this.pagenation.currentPage = parseInt(res.currentPage) + 1
                        this.pagenation.totalPage = parseInt(res.totalPage)
                        this.pagenation.perPage = parseInt(res.perPage)
                    } else {
                        this.$Message.error(res.text)
                    }
                })
            }
        },
        mounted() {
            this.init()
        },
    }
</script>
